<script setup>
	import {
		baseUrl
	} from '@/common/api/config.js'
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useUserStore,
	} from '@/stores'
	import { modifyUser } from '@/services/user.js';
	// 用户数据  
	const userProfile = useUserStore().profile
	const userForm = ref()
	const sexs = [{
		text: '男',
		value: 0
	}, {
		text: '女',
		value: 1
	}]
	const userFormData = reactive({
		u_id: userProfile.u_id,
		u_name: userProfile.u_name ? userProfile.u_name : '匿名用户',
		u_tel: userProfile.u_tel,
		u_emergency_tel: userProfile.u_emergency_tel,
		u_sex: userProfile.u_sex?userProfile.u_sex:0,
		u_birthday: userProfile.u_birthday,
		u_img_url: [{
			url: userProfile.u_img_url ? baseUrl+userProfile.u_img_url : 'http://somnium.love/110.jpg'
		}],
		u_img_file:''
	});
	const rules = {
		u_name: {
			rules: [
				// 对name字段进行长度验证
				{
					minLength: 3,
					maxLength: 10,
					errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				}
			],
			label: '用户名'
		},
		u_tel: {
			rules: [{
				minLength: 11,
				maxLength: 11,
				errorMessage: '{label}长度在11个数字',
			}],
			label: '电话号码'
		},
		u_emergency_tel: {
			rules: [{
				minLength: 11,
				maxLength: 11,
				errorMessage: '{label}长度在11个数字',
			}],
			label: '电话号码'
		}
	}

	function selectFile(e) {
		userFormData.u_img_url = [{url:e.tempFiles[0].url}]
		userFormData.u_img_file = e.tempFiles[0].url
	}

	function onSubmit() {
		// console.log(22222222,userForm)
		userForm.value.validate().then((res) => {
			// console.log(1111111111111,userFormData)
			// 成功返回，res 为表单数据
			if(userFormData.u_img_file){
				uni.uploadFile({
					url: baseUrl + '/api/user/edit',
					filePath: userFormData.u_img_file,
					name: 'u_img_file',
					formData: {
						'u_id': userFormData.u_id,
						'u_name': userFormData.u_name,
						'u_tel': userFormData.u_tel,
						'u_sex':userFormData.u_sex,
						'u_emergency_tel': userFormData.u_emergency_tel,
						'u_birthday': userFormData.u_birthday.replaceAll('-','/'),
					},
					success: (res) => {
						res.data = JSON.parse(res.data)
						// console.log(11111111,res)
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '修改成功'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '修改失败'
							})
						}
					},
					fail: (err) => {
						// console.log(11111111,err)
						uni.showToast({
							icon: 'none',
							title: '修改失败'
						})
					}
				});
			}else{
				// console.log(2222222222,userFormData)
				modifyUser({
					'u_id': userFormData.u_id,
					'u_name': userFormData.u_name,
					'u_tel': userFormData.u_tel,
					'u_sex':userFormData.u_sex,
					'u_emergency_tel': userFormData.u_emergency_tel,
					'u_birthday': userFormData.u_birthday.replaceAll('-','/'),
				}).then(res=>{
					if (res.data.code == 200) {
						useUserStore().setProfile(res.data.data)
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						})
						
					} else {
						uni.showToast({
							icon: 'error',
							title: '修改失败'
						})
					}
				}).catch((err)=>{
					console.log(err)
					uni.showToast({
						icon: 'error',
						title: '修改失败'
					})
				})
			}
			
		}).catch((err) => {
			// 表单校验验失败，err 为具体错误信息
			uni.showToast({
				icon: 'none',
				title: '表单校验失败'
			})
		})
	}
</script>

<template>
	<view class="">
		<view class="content">
			<uni-forms :rules="rules" :model="userFormData" ref="userForm" validateTrigger="blur">
				<!-- 表单内容 -->
				<uni-forms-item name="u_img_url" class="form-item">
					<text class="label" style="margin-top: 65rpx;">头像</text>
					<uni-file-picker v-model="userFormData.u_img_url" limit="1" disable-preview mode="grid"
						:del-icon="false" @select="selectFile" file-mediatype="image">
						上传图片
					</uni-file-picker>
				</uni-forms-item>
				<uni-forms-item name="u_name" class="form-item">
					<text class="label">用户名</text>
					<input class="input" placeholder="请填写用户名" v-model="userFormData.u_name" />
				</uni-forms-item>
				<uni-forms-item name="u_tel" class="form-item">
					<text class="label">手机号码</text>
					<input class="input" placeholder="请填写手机号码" v-model="userFormData.u_tel" />
				</uni-forms-item>
				<uni-forms-item name="u_emergency_tel" class="form-item">
					<text class="label">紧急联系电话</text>
					<input class="input" placeholder="请填写紧急联系电话号码" v-model="userFormData.u_emergency_tel" />
				</uni-forms-item>
				<uni-forms-item name="u_sex" class="form-item">
					<text class="label">性别</text>
					<uni-data-checkbox v-model="userFormData.u_sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item name="u_birthday" class="form-item">
					<text class="label">出生日期</text>
					<uni-datetime-picker type="date"  v-model="userFormData.u_birthday" ref="datetimePicker"/>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- 提交按钮 -->
		<button @tap="onSubmit" class="button">保存</button>
	</view>
</template>

<style lang="scss">
	// 深度选择器修改 uni-data-picker 组件样式
	:deep(.selected-area) {
		flex: 0 1 auto;
		height: auto;
	}

	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: red;
	}
</style>